import { observer } from 'mobx-react-lite';
import systemStore from '@/stores/SystemStore';
import Navbar from '@/components/Navbar';
import { Text, View } from '@tarojs/components';
import { Rate, TextArea, Uploader } from '@nutui/nutui-react-taro';
import './index.less';
import ButtonComp from '@/components/Button';
import { useState } from 'react';
import ImageConstant from '@/constant/ImageConstant';
import authStore from '@/stores/AuthStore';
import CodeConstant from '@/constant/CodeConstant';
import { getCurrentInstance, navigateBack, showToast } from '@tarojs/taro';
import HouseCommentBusiness from '@/business/HouseCommentBusiness';
import userStore from '@/stores/UserStore';

function CommentHouse() {
  const routerParam = getCurrentInstance().router?.params;
  const {user} = userStore;
  const [houseScore, setHouseScore] = useState(0);
  const [landlordScore, setLandlordScore] = useState(0);
  const [comment, setComment] = useState('');
  const [commentImgList, setCommentImgList] = useState<string[]>([]);

  /**
   * 房屋图片上传成功回调
   */
  const commentImgUploadSuccess = ({responseText}) => {
    const res: any = JSON.parse(responseText.data);
    if (res.code !== CodeConstant.SUCCESS) {
      showToast({title: '图片上传失败！', icon: 'error'});
      return;
    }
    setCommentImgList(commentImgList => [...commentImgList, res.data]);
    showToast({title: '图片上传成功！', icon: 'success'});
  };
  /**
   * 房屋图片上传失败回调
   */
  const commentImgUploadFail = () => {
    showToast({title: '图片上传失败！', icon: 'error'});
  };

  /**
   * 删除图片时触发的回调
   */
  const commentImgDelete = async ({url}: any) => {
    const strArr = url.split('/');
    const imgName = strArr[strArr.length - 1];
    setCommentImgList(commentImgList => commentImgList.filter(i => i !== imgName));
  };

  /**
   * 发布评论
   */
  const releaseComment = async () => {
    await HouseCommentBusiness.addComment({
      houseScore,
      landlordScore,
      comment,
      image: JSON.stringify(commentImgList),
      tenantId: user.id,
      houseId: Number(routerParam?.houseId),
      landlordId: Number(routerParam?.landlordId),
      leaseId: Number(routerParam?.leaseId)
    });
    navigateBack();
    showToast({
      title: '评论成功',
      icon: 'success'
    });
  };
  return (
    <Navbar
      title={ routerParam?.houseName }
      mode='back'
      bgColor='var(--mini-first)'
    >
      <View className='comment-house-container' style={ {height: systemStore.haveNavbarNotTabbarHeight} }>
        <View className='comment-item rete-item'>
          <Text className='text'>房屋评分：</Text>
          <Rate onChange={ (val) => setHouseScore(val) }/>
        </View>
        <View className='comment-item rete-item'>
          <Text className='text'>房东评分：</Text>
          <Rate onChange={ (val) => setLandlordScore(val) }/>
        </View>
        <View className='comment-item'>
          <Text className='text'>评价：</Text>
          <TextArea
            className='textarea'
            showCount={ true }
            placeholder='请输入您宝贵的评价'
            onChange={ (val) => setComment(val) }
          ></TextArea>
        </View>
        <View className='comment-item'>
          <Text className='text'>图片：</Text>
          <Uploader
            url={ ImageConstant.UPLOAD_IMG_VIDEO }
            maxCount={ 4 }
            multiple={ true }
            headers={ {authorization: authStore.token} }
            onSuccess={ commentImgUploadSuccess }
            onFailure={ commentImgUploadFail }
            onDelete={ commentImgDelete }
          />
        </View>
        <ButtonComp
          size='large'
          title='发布'
          onClick={ releaseComment }
        />
      </View>
    </Navbar>
  );
}

export default observer(CommentHouse);